<template>
  <div>
    <!-- 绑定类 -->
    <div>
      <div :class="{ active: isActive }">color</div>
      <button @click="changeActive">change</button>
    </div>

    <!-- 绑定样式 -->
    <div>
      <div
        :style="{ height: heightVal + 'px', color: colorVal }"
        style="width: 100px; background-color: pink"
      >
        color
      </div>
      <input type="text" v-model="heightVal" />
      <br>
      <input type="text" v-model="colorVal" />
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        isActive: false,
        heightVal: 30,
        colorVal: "",
      };
    },
  methods: {
    changeActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>
<style>
.active {
  color: red;
}
</style>